import React, { useState } from 'react'
import { request } from '@/utils'
import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro'
import { View} from '@tarojs/components'
import {  AtCard, AtButton, AtInput, AtMessage } from 'taro-ui'
import './index.less'

//车队记账管理
const Booking = () => {
  const [list, setList] = useState([])
  const [name, setName] = useState('')
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const getList = async (type, index, flag) => {
    Taro.showLoading({mask: true})
    const data = await request({url: `hkshihua/user/getMotorcadeOilMassList?motorcadeName=${type || ''}`, data: {pageIndex: index || page}})
    setList(flag ? [...list, ...data.list] : [...data.list])
    setTotal(data.total)
  }
  usePullDownRefresh(() => {
    setName('')
    setPage(1)
    getList('', 1)
    Taro.stopPullDownRefresh()
  })
  useReachBottom(() => {
    setPage(page + 1)
    if(page * 10 >= total) return
    getList(name, page + 1, true)
  })
  const handleChange = (e) => {
    setName(e)
  }
  const handleSearch = () => {
    getList(name, 1)
  }
  useDidShow(() => {
    setPage(1)
    getList(name, 1)
  })
  const handleAdd = () => {
    Taro.navigateTo({
      url: '/pages/booking/BookingEdit/index'
    })
  }
  const handleOnClick = async (id, type) => {
    if(type) return
    Taro.showModal({
      title: '提示',
      content: '确定要撤销？',
      async success(res) {
        if(res.confirm) {
          Taro.showLoading({mask: true})
          const { error } = await request({ url: 'hkshihua/user/revokeMotorcadeOilMass', data: {id}})
          if(error) return
          Taro.atMessage({message: '操作成功', type: 'success'})
          setTimeout(() => {
            getList(name, 1)
          }, 3000)
        }
      }
    })
  }
  return (
    <View>
      <AtMessage />
      <View className='m-list-1'>
        <View className='m-item-1'>

          <View className='_border_1'>
            <AtInput
              cursor={-1}
              name='fillName'
              title='车队名称'
              type='text'
              placeholder='请输入车队名称'
              value={name}
              onChange={handleChange}
              // value={this.state.fillName}
              // onChange={this.handleChange.bind(this, 'fillName')}
            />
          </View>
          {/* <View className='_border_1'>
            <Picker mode='date' >
              <AtList>
                <AtListItem title='查询时间' extraText={1} />
              </AtList>
            </Picker>
          </View> */}
          <View style={{marginTop: '20px'}}>
            <AtButton type='primary' onClick={handleSearch} >查询</AtButton>
          </View>

        </View>
      </View>

      <View className='fleet-list'>
        {list.map((item) => {
          return <View className='fleet-list_item' key={item.id}>
          <AtCard
            // extra={item.revokeFlag ? '已撤销' : '撤销'}
            // extraStyle={{color: item.revokeFlag ? 'red' : ''}}
            note={item.createTime}
            title={item.name}
            thumb='http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG'
            data-src='1'
          >
            <View onClick={() => {handleOnClick(item.id, item.revokeFlag)}} style={{color: item.revokeFlag ? '' : 'red', position: 'absolute', top: '8px', right: 0, padding: '0 20px'}}>{item.revokeFlag ? '已撤销' : '撤销'}</View>
            <View>
              <View className='at-row _body _view_6p'>
                <View className='at-col at-col-6 at-col--wrap'>
                  <View className='_view_6p'>加油量:{item.oilMass}升</View>
                </View>
                <View className='at-col at-col-6 at-col--wrap'>
                  <View className='_view_6p'>金额:{item.amount}元</View>
                </View>
              </View>
            </View>
          </AtCard>
        </View>
        })}

      </View>
      {page * 10 >= total && <View className='no-data'>暂无更多数据</View>}
      <View style={{height: '90px'}}></View>
      <View className='add-more' onClick={handleAdd}>
        +
      </View>
    </View >
  )
}

export default Booking
